/*
 * @Author: xuchao 
 * @Date: 2018-06-05 16:48:27 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-06-22 15:25:23
 */

import React, { Component } from 'react';

export default class Chart extends Component {
    constructor(props){
        super(props)
        this.state = {
            tabs: [{
                name: '安全集成贡献榜',
                url: require('@/static/images/chart-1.jpg')
            }, {
                name: '安全服务贡献榜',
                url: require('@/static/images/chart-2.jpg')
            }, {
                name: '应急响应贡献榜',
                url: require('@/static/images/chart-4.jpg')
            }, {
                name: '安全产品贡献榜',
                url: require('@/static/images/chart-3.jpg')
            }],
            currentIndex: 0
        }
    }

    tabToggle(index){
        this.setState({
            currentIndex: index
        })
    }

    render(){
        const { tabs, currentIndex } = this.state;
        return(
            <div className="csaqgxb">
                <div className="center">
                    <p>城市安全贡献榜</p>
                    <div className="border" />
                    <div className="progress">
                        <div />
                        <ul>
                            {
                                tabs && tabs.map((item, index) => {
                                    return(
                                        <li className={currentIndex===index ? 'active' : ''} onClick={this.tabToggle.bind(this, index)} key={index}>
                                            <em></em>
                                            <p>{item.name}</p>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    <img src={tabs[currentIndex].url} alt=""/>
                </div>
            </div>
        )
    }
}